<template>
    <div contenteditable="true" @blur="contentBlur" @click="contentFoucs">

    </div>
</template>
<script>
import {getCursorPosition,setCursorPosition} from '../utils/cursorPosition.js'
import { setTimeout } from 'timers';
export default {
    data() {
        return {
            range: {},
            selection: {},
        }
    },
    methods:{
        contentBlur () {
            /**
             * 每次焦点移出都要保存一次当前 range ，后面好放回来
             * 由于输入框以外的点击都会使输入框失去焦点，不知道会有什么操作，故勤保存
             */
            this.range = this.selection.getRangeAt(0)
        },
        contentFoucs (e) {
            /**
             * range更新到点击的位置
             * 点到图片就根据点击位置和图片大小设置一个合理的位置(前或后)
             */
            let node = e ? e.target : {}
            this.range = this.selection.getRangeAt(0)
            if (node.tagName === 'IMG') {
                this.setCursor(node, e.offsetX < node.width / 2)
            }
        },
        addImage (e) {
            /** 
             * 点击emoji图片后，复制节点添到当前range里并设置光标和更新range 
             * 若是点到其他地方则设置到之前的位置
             */
            if (e.target.tagName === 'IMG') {
                let node = e.target.cloneNode(true)
                this.range.insertNode(node)
                this.setCursor(node, false)
            } else {
                this.setCursor()
            }
        },
        setCursor (node, before) {
            /**
             * node 为传入的节点，不传则foucs到之前保存的位置
             * before 控制折叠方向
             */
            if (node) {
                // 需要新建一个range来添加内容
                let range = document.createRange()
                range.selectNode(node)
                range.collapse(!!before)
                this.selection.removeAllRanges()
                this.selection.addRange(range)
                // 更新 range
                this.range = range
            } else {
                this.selection.removeAllRanges()
                // 使用之前的
                this.selection.addRange(this.range)
            }
        },
    },
    mounted() {
        // 先得到selection，并创建一个range
        this.selection = document.getSelection()
        this.range = document.createRange()
        this.$el.focus()
        this.$el.blur()
    }
}
</script>
<style lang="scss" scoped>

</style>

